<template>
    <div class="session-item" :class="{ active: active }" @click="clickSession">
        <div class="session-name">{{ session.title || '未命名会话' }}</div>
        <el-dropdown placement="bottom-start" trigger="click" @command="commandHandler">
            <KuiIcon name="MoreFilled" class="session-icon" style="color: #ffffff;" />
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="rename" icon="EditPen">重命名</el-dropdown-item>
                    <el-dropdown-item command="mark_top" v-if="!session.topFlag">
                        <div style="display: flex; align-items: center;">
                            <KuiIcon name="icon-pin" style="color: inherit;" />
                            <span>置顶此会话</span>
                        </div>
                    </el-dropdown-item>
                    <el-dropdown-item command="mark_top_cancel" v-if="session.topFlag">
                        <div style="display: flex; align-items: center;">
                            <KuiIcon name="icon-pin" style="color: inherit;" />
                            <span>取消置顶此会话</span>
                        </div>
                    </el-dropdown-item>
                    <el-dropdown-item command="mark_collect" icon="Share"
                        v-if="!session.collectFlag">收藏此会话</el-dropdown-item>
                    <el-dropdown-item command="mark_collect_cancel" icon="Share"
                        v-if="session.collectFlag">取消收藏此会话</el-dropdown-item>
                    <el-dropdown-item command="batch_management" icon="Operation">批量管理</el-dropdown-item>
                    <el-dropdown-item command="delete" divided>
                        <div style="color: red;display: flex;align-items: center;">
                            <KuiIcon name="DeleteFilled" style="color: red;" />
                            <span>删除此会话</span>
                        </div>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script>
export default {
    props: {
        session: {
            type: Object,
            required: true
        },
        active: {
            type: Boolean,
            default: false
        }
    },
    emits: ['click', 'afterUpdateSession', 'afterDeleteSession'],
    methods: {
        clickSession() {
            this.$emit('click', this.session);
        },
        handleRename(session) {
            this.$prompt('请输入新的会话名称', '重命名会话', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: session.title || '',
            }).then(({ value }) => {
                const body = {
                    sessionId: session.id,
                    property: 'title',
                    value: value,
                }
                this.$api.ai.partialUpdateChatSession(body).then(() => {
                    this.$message.success('会话重命名成功');
                    this.$emit('afterUpdateSession', { ...session, title: value });
                });
            }).catch(() => {
                // 取消操作
            });
        },
        handleMarkTop(session, topFlag) {
            const body = {
                sessionId: session.id,
                property: 'topFlag',
                value: topFlag,
            }
            this.$api.ai.partialUpdateChatSession(body).then(() => {
                this.$message.success(topFlag ? '已置顶' : '已取消置顶');
                this.$emit('afterUpdateSession', { ...session, topFlag });
            });
        },
        handleMarkCollect(session, collectFlag) {
            const body = {
                sessionId: session.id,
                property: 'collectFlag',
                value: collectFlag,
            }
            this.$api.ai.partialUpdateChatSession(body).then(() => {
                this.$message.success(collectFlag ? '已收藏' : '已取消收藏');
                this.$emit('afterUpdateSession', { ...session, collectFlag });
            });
        },
        handleDelete(sessionId) {
            this.$confirm('删除会话将同时删除该会话下的所有消息，是否确认删除？', '删除会话', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$api.ai.deleteChatSession(sessionId).then(() => {
                    this.$message.success('会话删除成功');
                    this.$emit('afterDeleteSession', sessionId);
                });
            }).catch(() => {
                // 取消操作
            });
        },
        commandHandler(command) {
            const currentSession = this.session;
            if (command === 'rename') {
                this.handleRename(currentSession);
            } else if (command === 'mark_top') {
                this.handleMarkTop(currentSession, true);
            } else if (command === 'mark_top_cancel') {
                this.handleMarkTop(currentSession, false);
            } else if (command === 'mark_collect') {
                this.handleMarkCollect(currentSession, true);
            } else if (command === 'mark_collect_cancel') {
                this.handleMarkCollect(currentSession, false);
            } else if (command === 'batch_management') {
                this.sessionListModalVisible = true;
            } else if (command === 'delete') {
                this.handleDelete(currentSession.id);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.session-item {
    padding: 3px 5px 3px 0px;
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 5px;
    width: calc(100% - 12px);
    cursor: pointer;

    &:hover {
        background-color: #F0F2F5;

        // color: #ffffff;

        .session-icon {
            display: block;
        }
    }

    &.active {
        background-color: #409EFF;
        color: #ffffff;

        .session-icon {
            display: block;
        }
    }

    .session-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 3px 5px;
        cursor: pointer;
        width: calc(100% - 20px);
    }

    .session-icon {
        width: 20px;
        display: none;
        cursor: pointer;
        color: #ffffff;
    }
}
</style>